<template>
  <div class="app-container">
  <el-card class="box-card" shadow="never" style="border:0px;">
      <div slot="header" style="color:#303133;font-size:14px;font-weight:bold;">
        <span>权限管理</span>
      </div>
     <div class="filter-container">
      <div class="left" style="margin-bottom:10px;">
        <el-form :inline="true" :model="listQuery" class="demo-form-inline" size="medium" label-position="right" ref="listQuery">
          <el-form-item label="权限标识符" prop="keyTag">
            <el-input v-model="listQuery.keyTag" clearable class="filter-item" placeholder="请输入权限标识符" />
          </el-form-item>
          <el-form-item label="权限名称" prop="displayName">
            <el-input v-model="listQuery.displayName" clearable class="filter-item" placeholder="请输入权限名称" />
          </el-form-item>
          <el-form-item label="权限类型" prop="type">
            <el-select v-model="listQuery.type" placeholder="请选择">
              <el-option label="菜单权限" value="1"></el-option>
              <el-option label="其他资源权限" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <el-button type="primary" size="small" icon="el-icon-search" round @click="queryList()">查询</el-button>
        <el-button size="small" round @click="restForm">重置</el-button>
      </div>
    </div>

    <vxe-toolbar ref="xToolbar">
         <template #buttons>
        <el-button type="text" icon="el-icon-plus" @click="addEvent()">新增权限</el-button>
        </template>
    </vxe-toolbar>

    <el-table
      :data="treeData"
      style="width: 100%"
      row-key="id"
      lazy
      :header-cell-style="{ background: '#F7F7F8', color: '#606266' }"
      v-loading="loading">
      <el-table-column prop="displayName" label="权限名称" width="300" />
      <el-table-column prop="keyTag" label="权限标识符" />
      <el-table-column prop="permissionsTypeName" label="权限类型" width="100" />
      <el-table-column label="创建时间" prop="createTime" />
      <el-table-column label="是否可用" prop="available" width="100">
        <template slot-scope="scope">
           <span>
              <span>
                <i class="smallCircle" :class="[scope.row.available == '1' ? 'text_active' : 'text_noActive']"/>{{ scope.row.available == '1' ? '可用' : '不可用' }}
              </span>
            </span>
        </template>
      </el-table-column>
      <el-table-column label="创建者" prop="creator" />
      <el-table-column fixed="right" width="240" label="操作">
        <template slot-scope="scope">
            <el-button type="info" size="mini" round @click="openPers(scope.row.id)" v-if="scope.row.available == '2'">启用</el-button>
            <el-button type="danger" size="mini" round @click="closePers(scope.row.id)" v-if="scope.row.available == '1'">禁用</el-button>
            <el-button type="primary" size="mini" round @click="addEvent(scope.row)">新增</el-button>
            <el-button type="success" size="mini" round @click="editEvent(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  新增权限 -->
    <vxe-modal
      @close="closeModal"
      v-model="modalAddOrUpdateWindow"
      width="700px"
      height="480px"
      :title="'新增&保存'"
      class="addModal"
    >
      <el-form :model="modalUpdateForm" title-align="right" title-width="100" ref="modalUpdateForm">
        <el-form-item label="父级权限" prop="parentCode" label-width="200px">
          <el-input v-model="modalUpdateForm.parentCode" placeholder="父级权限" clearable style="width: 400px" disabled/>
        </el-form-item>

        <el-form-item
          label="权限标识符"
          prop="keyTag"
          :rules="{ required: true, message: '权限标识符不能为空', trigger: 'blur' }"
          label-width="200px"
        >
          <el-input v-model="modalUpdateForm.keyTag" placeholder="权限标识符" clearable style="width: 400px"  v-if="modalUpdateForm.id === undefined" />
          <el-input v-model="modalUpdateForm.keyTag" placeholder="权限标识符" clearable style="width: 400px"  v-if="modalUpdateForm.id != undefined" disabled/>
        </el-form-item>
        <el-form-item
          label="权限名称"
          prop="displayName"
          label-width="200px"
          :rules="[{ required: true, message: '权限名称不能为空', trigger: 'blur' }]"
        >
          <el-input v-model="modalUpdateForm.displayName" placeholder="权限名称" clearable style="width: 400px" />
        </el-form-item>
        <el-form-item
          label="页面路由"
          prop="router"
          label-width="200px"
        >
          <el-input v-model="modalUpdateForm.router" placeholder="页面路由" clearable style="width: 400px" />
        </el-form-item>
        <el-form-item
          label="权限类型"
          field="type"
          prop="type"
          label-width="200px"
          :rules="[{ required: true, message: '权限类型不能为空' }]"
          required  v-if="modalUpdateForm.id === undefined"
        >
          <el-select v-model="modalUpdateForm.type" placeholder="请选择权限类型" clearable>
            <el-option value="1" label="菜单权限"></el-option>
            <el-option value="2" label="功能权限"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="200px">
          <el-button type="primary" @click="addOrUpdate('modalUpdateForm')" status="primary">提交</el-button>
          <el-button @click="closeModal" status="danger" type="danger">关闭</el-button>
        </el-form-item>
      </el-form>
    </vxe-modal>
  </el-card>
  </div>
</template>

<script>
import { addOrUpdate, enableOrDisable,listTree,trees } from './tools';
import DicSelect from '@/components/select/index';
export default {
  name: 'User',
  components: { DicSelect },
  data: function () {
    return {
      active: 0,
      treeData: [],
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        displayName: undefined,
        type: undefined,
        keyTag: undefined,
        parentCode: undefined
      },
      modalUpdateForm: {
        displayName: undefined,
        type: undefined,
        keyTag: undefined,
        parentCode: undefined,
        router: undefined
      },
      modalAddOrUpdateWindow: false,
      loading: true,
    };
  },
  mounted: function () {
    this.queryList();
  },
  // getTask
  methods: {
    // 列表查询
    queryList() {
      this.loading = true;
      trees(this.listQuery).then((data) => {
        if (data.data != null){
          this.treeData = data.data;
        }else{
          this.treeData = [];
        }
        this.loading = false
        console.log('响应数据:%o', data);
      });
    },
    changePage() {
      this.queryList();
    },

    // 重置查询表单
    restForm() {
      this.$refs['listQuery'].resetFields();
      this.queryList();
    },

    // 打开新增窗口
    addEvent(row) {
      this.modalAddOrUpdateWindow = true;
      this.modalUpdateForm = row;
      var parentCode = row != null ? row.code : "100";
      // 重置新增或编辑表单
      this.modalUpdateForm = {
        parentCode: parentCode
      };
      this.restModalUpdateForm();
    },

    // 重置新增表单
    restModalUpdateForm(){
      this.$refs['modalUpdateForm'].resetFields();
    },

    // 打开编辑窗口
    editEvent(row) {
      this.modalAddOrUpdateWindow = true;
      this.modalUpdateForm = row;
      this.getFormParam(row);
      this.restModalUpdateForm();
    },

    // 关闭窗口
    closeModal(row) {
      this.modalAddOrUpdateWindow = false;
      this.restModalUpdateForm();
    },

    addOrUpdate(modalUpdateForm) {
      this.$refs[modalUpdateForm].validate((valid) => {
        if (valid) {
          addOrUpdate(this.modalUpdateForm).then((data) => {
            if (data.code === 20000) {
              this.$notify.success({title: '成功',message: '操作成功',});
              this.closeModal();
              this.queryList();
            } else {
              this.$message.error(data.description);
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    enableOrDisable(id, available) {
      this.loading = true;
      enableOrDisable(id, available).then((data) => {
        if (data.code === 20000) {
          this.$notify.success({title: '成功',message: '操作成功',});
          this.queryList();
          this.closeModal();
        } else {
          this.$message.error(data.description);
        }
      });
    },
    // 启用
    openPers(id) {
      this.enableOrDisable(id, 1);
    },

    closePers(id) {
      this.$confirm('确定要禁用吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // 开始提交信息
        this.enableOrDisable(id, 2);
      });
    },

    getFormParam(row) {
      this.modalUpdateForm = {
        keyTag: row.keyTag,
        displayName: row.displayName,
        type: row.type,
        id: row.id,
        parentCode: row.code,
        router: row.router
      };
    },
    cellDblclick({row,rowIndex,column,columnIndex,cell},event) {
      let _this = this;
      this.$copyText(event.target.innerText).then(function() {
        _this.$message.info('复制成功');
      });
    }
  },
};
</script>
<style lang="scss">
  .addModal{
    .el-form-item__error {
      padding-top: 0;
      line-height: 0.7;
    }
  }
  
</style>

<style lang="css" scoped>
.filter-container {
  display: flex;
  justify-content: space-between;
}

.vxe-table--render-default >>> .el-button--text{
  color: #2b7bfb;
}
.app-container >>> .vxe-table--render-default,.vxe-pager {
  font-family: PingFangSC, Arial, Helvetica, sans-serif;
}

.left {
  flex: 8;
  display: flex;
  flex-flow: row wrap;
  margin-right: 20px;
}
.left >>> .el-form {
  width: 100%;
}
.left >>> .el-form .el-form-item {
  display: flex;
  flex-flow: row nowrap;
  width: 30%;
  margin-right: 3%;
  float: left;
  margin-bottom: 14px;
}

.left >>> .el-form .el-form-item .el-form-item__label {
  font-weight: 500;
  color: #606266;
  text-align: left;
  /* flex: 1; */
}

.left >>> .el-form .el-form-item .el-form-item__content {
  flex: 1;
  /*超出部分隐藏*/
  text-overflow: ellipsis;
  /* 超出部分显示省略号 */
  white-space: nowrap;
  /*规定段落中的文本不进行换行 */
  width: 100%;
}
.date_item {
  width: 100%;
}
.right {
  flex: 2;
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  margin-right: 30px;
  margin-bottom: 30px;
}
</style>
